<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test: flow-into on list items that use different text directions or writing modes</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and-rules" />
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
        <link rel="help" href="http://www.w3.org/TR/css3-writing-modes/#direction">
        <link rel="help" href="http://www.w3.org/TR/css3-writing-modes/#writing-mode1">
		<meta name="flags" content="">
		<meta name="assert" content="The flow-into property can be applied to elements that have different text directions and writing modes. This tests that the rendering for lists that use different text directions/writing modes are not affected when they are extracted in a named flow and rendered in a region.">
		<link rel="match" href="reference/extract-ordered-list-direction-and-writing-modes-ref.html">
		<style>
		/*TODO: Include unprefixed and standard properties for writing modes and region breaking. */
		body>ol {
			flow-into: f;
			region-break-after: always;
			break-after: region;
			margin: 0;
		}
		.direction-rtl {
			direction: rtl;
			background-color: lightgray;
		}
		.writing-mode-vrl {
			writing-mode: vertical-rl;
			background-color: lightblue;
		}
		.writing-mode-vlr {
			writing-mode: vertical-lr;
			background-color: lightgreen;
		}
		.region {
			flow-from: f;
			border: thick solid black;
			width: 15em;
			height: 15em;
			float: left;
			margin: 0 1em;
		}
		</style>
	</head>
	<body>
		<!-- Extracting lists with different directions and writing modes. -->
		<p>Test pases if you see three rectangles with black borders containing a numbered list as described below. Each of the lists has a total of six items, three being in a nested list after the second item.</p>
		<p>The first rectangle should display the numbered list on a light gray background. The list items should be right-aligned, with the numbers on the right side of the list item text. Also, the list item numbering should have a period prepended to the actual number (<em>e.g.</em> <strong>.1</strong>) instead of appended to the actual number (<em>e.g.</em> <strong>1.</strong>).</p>
		<p>The second rectangle should display the numbered list on a light blue background. The text should be rotated 90 degrees clockwise with the list items progressing right to left (or top-to-bottom relative to the rotated list) &ndash; this means the right-most list item should have the number 1.</p>
		<p>The third rectangle should display the numbered list on a light green background. The text should be rotated 90 degrees clockwise, with the list items progressing left to right (or bottom-to-top relative to the rotated list) &ndash; this means the right-most list item should have the number 3.</p>
		<ol class="direction-rtl">
			<li>Top-level list, item 1</li>
			<li>Top-level list, item 2
				<ol>
					<li>First inner list, item 1</li>
					<li>First inner list, item 2</li>
					<li>First inner list, item 3</li>
				</ol>
			</li>
			<li>Top-level list, item 3</li>
		</ol>
		<ol class="writing-mode-vrl">
			<li>Top-level list, item 1</li>
			<li>Top-level list, item 2
				<ol>
					<li>First inner list, item 1</li>
					<li>First inner list, item 2</li>
					<li>First inner list, item 3</li>
				</ol>
			</li>
			<li>Top-level list, item 3</li>
		</ol>
		<ol class="writing-mode-vlr">
			<li>Top-level list, item 1</li>
			<li>Top-level list, item 2
				<ol>
					<li>First inner list, item 1</li>
					<li>First inner list, item 2</li>
					<li>First inner list, item 3</li>
				</ol>
			</li>
			<li>Top-level list, item 3</li>
		</ol>
		<div class="region"></div>
		<div class="region"></div>
		<div class="region"></div>
	</body>
</html>